<template lang=pug>
    .login-wrap
        .topBar
            svg(class="icon back",aria-hidden="true")
                use(xlink:href="#icon-jiantou")
            span 登录
        .logo
        .loginForm
            .iconInputGroup
                svg.icon(:class="{active:isActive==1}",aria-hidden="true")
                    use(xlink:href="#icon-username")
                input(ref="username",:class="{activeInput:isActive==1}",type="text", v-model="username", @focus="focus",@blur="blur", autocomplete="off", placeholder="手机号/用户名",name="username")
                svg.icon.cancel(:class="{activeCancel:isActive==1}",data-bind="username",aria-hidden="true",v-if="username!=''",@click="cancel",@touchstart.prevent="cancel")
                    use(xlink:href="#icon-close")
            .iconInputGroup
                svg.icon(:class="{active:isActive==2}",aria-hidden="true")
                    use(xlink:href="#icon-password")
                input(ref="password",:class="{activeInput:isActive==2}",type="password", v-model="password", @keyup.13="login", @focus="focus",@blur="blur", autocomplete="off", placeholder="密码",name="password")
                svg.icon.cancel(:class="{activeCancel:isActive==2}",data-bind="password",aria-hidden="true",v-if="password!=''",@click="cancel",@touchstart.prevent="cancel")
                    use(xlink:href="#icon-close")
            router-link.registry(to ="/forget") 快速注册
            router-link.forget(to ="/forget") 忘记密码
            button(@click="login") 登录
        toast(:message="message",:isShow="showToast")
</template>

<script type="es6">
    import toast from 'component/common/toast.vue'
    export default {
        name: 'login',
        data () {
            return {
                username: '',
                password: '',
                message:'',
                // 控制active 1: username 2: password
                isActive: 0,
                showToast:false,
            }
        },
        mounted(){
        },
        methods: {
            focus(ev){
                this.isActive = ev.target.name=='username'? '1':'2'
            },
            blur(ev){
                this.isActive = '0'
            },
            cancel(ev){
                let bindName;
                if (ev.target.tagName=='use')
                    bindName = ev.target.parentNode.getAttribute('data-bind')
                else
                    bindName = ev.target.getAttribute('data-bind')
                this[bindName]=''
                this.$refs[bindName].focus()
            },
            displayToast(msg){
                this.showToast=true
                this.message = msg
            },
            login(){
                this.displayToast('登录中')
                let loading = setInterval(()=>{
                    if (this.message.length>=6){
                        this.message = "登录中"
                    }else{
                        this.message += '.'
                    }
                },500)
                this.isDisabled = true
                this.$http.post('/user/login', {
                    username: this.username,
                    password: this.password,
                }).then(response => {
                    clearInterval(loading)
                    let show = new Promise(setTimeout(()=>{
                        this.showToast=false
                    },1500))
                    show.then(()=>{
                        if (response.data.code=='000000'){
                            console.log(this)
//                            this.router
                        }
                    })
                    this.displayToast(response.data.message)
                    this.isDisabled = false
                }).catch(error => {
                    clearInterval(loading)
                    setTimeout(()=>{this.showToast=false},1500)
//                    if (error.message.indexOf('timeout')!=-1)
                    this.displayToast('连接超时')
                    this.isDisabled = false
                })
            }
        },
        components:{
            toast
        }
    }
</script>

<style lang="stylus" scoped>
    @import "../../styles/common.styl"
    input:-webkit-autofill
        -webkit-box-shadow: 0 0 0px 1000px #fff inset
    .active
        color $mainColor
    .activeInput
        border-color $mainColor !important
    .activeCancel
        display inline !important
    .login-wrap
        display block
        width 16rem
        color $red
        font-size 1rem
        .topBar
            font-size 1rem
            background $mainColor
            color $assistantColor
            width 16rem
            text-align center
            padding .5rem 0
            .back
                font-size 1rem
                position absolute
                left 1rem
        .logo
            font-family Helvetica
            text-align center
            padding 1rem 0
            font-size 2.5rem
            color $mainColor
        .loginForm
            color $mainColor
            .iconInputGroup
                display block
                color $grayColor
                width 14rem
                margin .7rem auto
                .icon
                    font-size 1rem
                input
                    border none
                    border-bottom 1px solid $grayColor
                    width 12.5rem
                    outline none
                    line-height 1.2rem
                    padding .2rem
                    margin-bottom .2rem
                    margin-left .1rem
                    color $blackColor
                    font-size .85rem
                .cancel
                    borderRadius(50%)
                    color #fff
                    background $grayColor
                    font-size .5rem
                    padding .1rem
                    position absolute
                    right 1rem
                    margin-top .3rem
                    display none
            .forget,.registry
                font-size .7rem
                text-decoration none
                color $mainColor
                display block
            .forget
                float right
                margin 0 1rem .5rem 0
            .registry
                float left
                margin 0 0rem .5rem 1rem
            button
                margin 0 auto
                display block
                background $mainColor
                width 14rem
                border none
                font-size .5rem
                padding .5rem
                color $assistantColor
                font-size .85rem
                borderRadius(.3rem)

</style>
